সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element)


সুডো-এলিমেন্ট কি?

সিএসএস সুডো-এলিমেন্ট দ্বারা একটি এলিমেন্টের নির্দিষ্ট অংশকে সিলেক্ট করে স্টাইল করা হয়।

উদাহরণস্বরুপঃ

  • একটি এলিমেন্টের প্রথম অংশ বা প্রথম লাইনের স্টাইল পরিবর্তন।
  • একটি এলিমেন্টের পূর্বে এবং পরে কন্টেন্ট যোগ।

সকল সিএসএস সুডো-এলিমেন্ট

সিলেক্টরউদাহরণবর্ণনা
::afterp::after< p> এলিমেন্টের পরে কন্টেন্ট যোগ করবে।
::beforep::before< p> এলিমেন্টের পূর্বে কন্টেন্ট যোগ করবে।
::first-letterp::first-letter< p> এলিমেন্টের প্রথম শব্দটি সিলেক্ট করবে।
::first-linep::first-line< p> এলিমেন্টের প্রথম লাইনটিকে সিলেক্ট করবে।
::selectionp::selectionব্যবহারকারী কর্তৃক সিলেক্টকৃত < p> এলিমেন্টের অংশকে সিলেক্ট করবে।

গঠণপ্রণালী

selector::pseudo-element {
   property: value;
}

সিএসএস(১) এবং সিএসএস(২)-এ সুডো-এলিমেন্ট এবং সুডো-ক্লাসে একটি কোলন ব্যবহার হতো। সিএসএস(৩)-এ সুডো-এলিমেন্টে একটি কোলন ব্যবহারের পরিবর্তে দুইটি কোলন ব্যবহারের প্রচলন করে। সুডো-এলিমেন্ট এবং সুডো-ক্লাসের গঠণপ্রণালীর মধ্যে পার্থক্য তৈরি করার জন্য ইহা প্রচলন করা হয়েছিল।


::first-line সুডো-এলিমেন্ট

::first-line সুডো-এলিমেন্টটি একটি টেক্সটের প্রথম লাইনকে সিলেক্ট করার জন্য ব্যবহার করা হয়।

kt_satt_skill_example_id=905



বিঃদ্রঃ ::first-line সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্যে ব্যবহার করা যায়।

::first-line সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text
  • Vertical-align
  • text-transfor
  • line-height
  • clear

::first-letter সুডো-এলিমেন্ট

একটি টেক্সটের প্রথম অক্ষরকে সিলেক্ট করার জন্য ::first-letter সুডো-এলিমেন্টটি ব্যবহার করা হয়।

kt_satt_skill_example_id=908



বিঃদ্রঃ::first-letter সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্য ব্যবহার করা যায়।

::first-letter সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align("float" যদি "none" হয়)
  • text-transform
  • line-height
  • float
  • clear

সুডো-এলিমেন্ট এবং সিএসএস ক্লাস

সুডো-এলিমেন্টগুলো সিএসএস ক্লাসের সাথেও ব্যবহার করা যায়ঃ

kt_satt_skill_example_id=910


একাধিক সুডো-এলিমেন্টের ব্যবহার

আপনি চাইলে একই এলিমেন্টে একাধিক সুডো এলিমেন্ট ব্যবহার করতে পারেন।

kt_satt_skill_example_id=913


::before সুডো-এলিমেন্ট

একটি এলিমেন্টের আগে কন্টেন্ট যোগ করার জন্য ::before সুডো-এলিমেন্ট ব্যবহার করা হয়।

kt_satt_skill_example_id=916


::after সুডো-এলিমেন্ট

একটি এলিমেন্টের পরে কন্টেন্ট যোগ করার জন্য ::after সুডো-এলিমেন্ট ব্যবহার করা হয়।

kt_satt_skill_example_id=918


::selection সুডো-এলিমেন্ট

ব্যবহারকারী একটি এলিমেন্টের কোন অংশকে সিলেক্ট করলে, সিলেক্টকৃত অংশকে স্টাইল করার জন্য ::selection সুডো-এলিমেন্টটি ব্যবহার করা হয়।

::selection সুডো-এলিমেন্টের সাথে নিচের সিএসএস প্রোপার্টিগুলো ব্যবহার করা যায়ঃ

  • color
  • background
  • cursor
  • outline

kt_satt_skill_example_id=920


 

Content added || updated By

আরও দেখুন...

Promotion